import { CashbackTypes } from "@/api/cashback";
import { UserVipInfo } from "@/api/user";
import Box from "@/components/Box";
import { vipImages } from "@/utils/constant";
import { flatPoint, percentage } from "@/utils/methods";
import { server } from "@/utils/server";
import { getTranslations } from "next-intl/server";
import Image from "next/image";
import CashbackTable from "./CashbackTable";
import Progress from "./components/Progress";
import Week from "./Week";

const getVipInfoApi = async () => {
    return server
        .request<UserVipInfo>({
            url: "/v1/api/user/user_vip_info",
            method: "post",
        })
        .then((res) => {
            if (res.code === 200) return res.data;
            return {
                vip_exp: 0,
                vip_level: 0,
                vip_next_level: 0,
                vip_score_exp: 0,
            };
        });
};

const getCashBackApi = async (): Promise<CashbackTypes> => {
    return server
        .request<CashbackTypes>({
            url: "/v1/api/front/activity_cash",
            method: "post",
        })
        .then((res) => {
            return res.data;
        })
        .catch((error) => {
            return {
                rules: [],
                last_period: { end_time: 0, start_time: 0 },
                next_period: {
                    end_time: 0,
                    start_time: 0,
                },
                amount: 0,
                bet: 0,
                status: "expired",
                max_amount: 0,
            } as CashbackTypes;
        });
};
const CashbackInfo = async () => {
    const vipInfo = await getVipInfoApi();
    const cashbackInfo = await getCashBackApi();

    const currentGrade = cashbackInfo.rules?.find(
        (item) => item.level === (vipInfo.vip_level || 1)
    );
    const maxGrade = cashbackInfo.rules?.at(-1);

    const t = await getTranslations();
    const vipIconElement = vipImages.map((item, index) => {
        if (item.leve === vipInfo.vip_level) {
            return (
                <div key={index} className={"relative mr-[10px]"}>
                    <Image src={item.src} alt={"vip"} height={80} width={80} />
                    <span
                        className={"absolute bottom-[25%] w-[100%] text-center text-[0.16rem]"}
                        style={{ color: item.color }}
                    >
                        {item.leve}
                    </span>
                </div>
            );
        }
    });
    return (
        <>
            <Box
                className={
                    "w-full mb-[.1rem] rounded-[10px] bg-gradient-to-r from-[#1e2931] to-[#172f29]"
                }
            >
                <div className={"flex"}>
                    {vipIconElement}
                    <div className={"flex-1"}>
                        <div className={"flex items-baseline"}>
                            <span
                                className={"mr-[0.06rem] text-[0.23rem] font-bold text-[#11de68]"}
                            >
                                {currentGrade?.cashback}%
                            </span>
                            <span
                                className={"mr-[0.06rem] text-[0.23rem] font-bold text-[#11de68]"}
                            >
                                {t("cashback.cashbackTitle")}
                            </span>
                            <span
                                className={
                                    "w-[100%] text-right align-text-bottom text-[0.1rem] text-[#fff]"
                                }
                            >
                                Max {maxGrade?.cashback}%
                            </span>
                        </div>
                        <div className={"mt-[0.1rem]"}>
                            <Progress
                                num={percentage(vipInfo?.vip_exp, vipInfo.vip_score_exp)}
                                style={{
                                    "--fill-color": "#11de68",
                                    "--track-color": "#8f9498",
                                    "--track-width": "0.06rem",
                                }}
                            />
                            <div
                                className={
                                    "font-lightl mt-[0.04rem] text-right text-[0.1rem] text-[#5f7880]"
                                }
                            >
                                {t("ProfilePage.expTips", {
                                    exp: flatPoint(vipInfo.vip_score_exp - vipInfo.vip_exp),
                                })}
                                VIP{vipInfo.vip_next_level}
                            </div>
                        </div>
                    </div>
                </div>
            </Box>
            <Week cashbackInfo={cashbackInfo} />

            <CashbackTable cashbackInfo={cashbackInfo} />
            <div className={"mt-[0.2rem]"}>
                <h1 className={"font-bold text-[#fff]"}>{t("cashback.rules")}</h1>
                <ul
                    className={
                        "list-decimal pl-[0.1389rem] text-[0.12rem] leading-[0.18rem] text-[#6e848b]"
                    }
                >
                    <li>{t("cashback.rulesFirst")} </li>
                    <li>{t("cashback.rulesSecond")}</li>
                    <li>{t("cashback.rulesThird")}</li>
                    <li>{t("cashback.rulesFourth")}</li>
                    <li>{t("cashback.rulesFifth")}</li>
                    <li>{t("cashback.rulesSixth", { max: cashbackInfo.max_amount ?? 0 })}</li>
                    <li>{t("cashback.rulesSeventh")}</li>
                </ul>
            </div>
        </>
    );
};

export default CashbackInfo;